<template>
  <div class='search_result_container'>
    <!-- 搜索结果页-头部导航 -->
    <div class="search-result-container">
      <!-- 点击实现后退效果 -->
      <van-nav-bar title="搜索结果" left-arrow @click-left="$router.go(-1)" fixed />
    </div>

    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" :immediate-check="false">
      <ArticleItem v-for="item in resultList" :key="item.art_id" :artObj="item" :isShow="false" @click.native="itemClickFn(item.art_id)"></ArticleItem>
    </van-list>
  </div>
</template>

<script>
import { getSearchResultAPI } from '@/api'
import ArticleItem from '../../components/ArticleItem.vue'

export default {
  name: 'MySearchResult',
  props: ['q'],
  data () {
    return {
      queryInfo: {
        q: this.q,
        page: 1,
        per_page: 10
      },
      resultList: [],
      total: 0,
      loading: false,
      finished: false
    }
  },
  components: {
    ArticleItem
  },
  methods: {
    // 1.获取搜索结果
    async getSearchResults () {
      const { data: res } = await getSearchResultAPI(this.queryInfo)
      if (res.message === 'OK') {
        this.resultList = res.data.results
      }
    },

    // 2.下拉刷新
    async onLoad () {
      if (this.resultList.length > 0) {
        this.queryInfo.page++
        const { data: res } = await getSearchResultAPI(this.queryInfo)
        if (res.message === 'OK') {
          if (res.data.results.length === 0) {
            this.finished = true
            return
          }
          this.resultList = [...this.resultList, ...res.data.results]
          this.loading = false
        }
      }
    },

    // 3.点击文章单元格
    itemClickFn (artId) {
      this.$router.push({
        path: '/article-detail',
        query: {
          artId
        }
      })
    }

  },
  created () {
    this.getSearchResults()
  },
  mounted () { }
}
</script>

<style lang='less' scoped>
.search-result-container {
  padding-top: 46px;
}

/deep/ .van-icon-arrow-left {
  color: #fff5ff;
}
</style>
